import React from 'react';
import 'antd/dist/antd.css';
import { Form } from 'antd';
import IconSelector from '../IconSelector';
import Icon from '../Icon';
import '../../../assets/oaicons/iconfont.css';

const Basic = ({ form }) => {
    const { getFieldDecorator } = form;
    return (
        <Form>
            <Form.Item label="基本使用">
                {getFieldDecorator('test', {
                    initialValue: null
                })(
                    <IconSelector
                        colorList={['#FFA22D|#FFF5EA', '#5590F6|#EDF3FE', '#FF7760|#FFF1EF', '#44C69D|#ECF9F5']}
                        iconList={[
                            'iconlistfunction_absence_icon_default',
                            'iconlistfunction_jobswitch_icon_default',
                            'iconlistfunction_jobtransfer_icon_default'
                        ]}
                        disabledOptions={['iconlistfunction_absence_icon_default|#FFA22D|#FFF5EA']}
                        iconfontClassName="iconfont"
                        defaultSelectFirstOption
                    />
                )}
            </Form.Item>
            value: {form.getFieldValue('test')}
            <Form.Item label="禁用状态">
                {getFieldDecorator('test2', {
                    initialValue: null
                })(
                    <IconSelector
                        disabled
                        colorList={['#FFA22D|#FFF5EA', '#5590F6|#EDF3FE', '#FF7760|#FFF1EF', '#44C69D|#ECF9F5']}
                        iconList={[
                            'iconlistfunction_absence_icon_default',
                            'iconlistfunction_jobswitch_icon_default',
                            'iconlistfunction_jobtransfer_icon_default'
                        ]}
                        iconfontClassName="iconfont"
                        defaultSelectFirstOption
                    />
                )}
            </Form.Item>
            value: {form.getFieldValue('test2')}
            <Form.Item label="只展示图标">
                <Icon
                    iconfontClassName="iconfont"
                    icon="iconlistfunction_absence_icon_default|#FFA22D|#FFF5EA"
                    size={32}
                />
                <Icon
                    iconfontClassName="iconfont"
                    icon="iconlistfunction_absence_icon_default|#FFA22D|#FFF5EA"
                    size={44}
                />
            </Form.Item>
        </Form>
    );
};

export default Form.create()(Basic);
